<template>
	<view>
		<view class="addr-wrapper" @click="addrClic">
			<view class="addr-detail">
				<view class="name-and-mobile">
					<image src="/static/user/icon9@2x.png" mode=""></image>
					<text class="name">收货人：{{ 'name' in addr_item ? addr_item.name : 'xxx' }}</text>
					<text class="mobile">{{ 'mobile' in addr_item ? addr_item.mobile : 'xxx-xxx-xxxxx' }}</text>
				</view>
				<view class="addr-info">
					<text>收货地址:{{ 'address' in addr_item ? $db.getAddrById(addr_item.area_id) + ' ' + addr_item.address : '请选择地址' }}</text>
				</view>
			</view>
			<image class="addr-right" src="/static/public/more@2x.png" mode=""></image>
			<image class="addr-bottom" src="/static/submit-order/tiao@2x.png" mode=""></image>
		</view>
		<view class="shop-head">
			<image src="/static/public/dianp@2x.png" mode=""></image>
			<text class="title">Musn's</text>
		</view>
		<view class="shop-detail-wrapper">
			<image :src="goods_img" mode=""></image>
			<view class="name-and-price">
				<text class="name">{{ name }}</text>
				<text class="price">￥{{ price }}</text>
			</view>
			<!-- <text class="nums">×1</text> -->
		</view>
		<view class="card-list">
			<!-- <picker class="" :range="picker_range_array.gender" @change="genderChange">
				<view class="card-item">
					<view class="left"><text>性别</text></view>
					<view class="right">
						<text>{{ gender }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker> -->
			<!-- <view class="card-item">
				<view class="left"><text>身高(cm)</text></view>
				<view class="right"><input type="number" value="" placeholder="请输入您的身高" v-model="user_height" /></view>
			</view> -->
			<!-- <view class="card-item">
				<view class="left"><text>体重(kg)</text></view>
				<view class="right"><input type="number" value="" placeholder="请输入您的体重" v-model="user_weight" /></view>
			</view>
			<picker class="" :range="picker_range_array.exercise" @change="chekeIsExercise">
				<view class="card-item">
					<view class="left"><text>是否健身</text></view>
					<view class="right">
						<text>{{ user_is_exercise }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker> -->
			<picker class="" :range="demand_value_list" @change="checkDemand">
				<view class="card-item">
					<view class="left"><text>需求</text></view>
					<view class="right">
						<text>{{ user_check_demand.type_name }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="date" :start="tomorrow" :end="end_day" @change="checkStartDay" :value="check_start_day">
				<view class="card-item">
					<view class="left"><text>计划日期</text></view>
					<view class="right">
						<text>{{ check_start_day }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
			<picker class="" mode="time" @change="checkStartTime" :value="check_start_time">
				<view class="card-item">
					<view class="left"><text>计划时间</text></view>
					<view class="right">
						<text>{{ check_start_time }}</text>
						<image src="../../static/public/more@2x.png" mode=""></image>
					</view>
				</view>
			</picker>
		</view>

		<view class="card-list">
			<view class="card-item">
				<view class="left"><text>配送方式</text></view>
				<view class="right"><text>同城快递</text></view>
			</view>
			<!-- 			<view class="card-item" @click="openFoodNeeds">
				<view class="left">
					<text>买家留言</text>
				</view>
				<view class="right">
					<image src="../../static/public/more@2x.png" mode=""></image>
				</view>
			</view> -->
		</view>

		<view class="card-list shop-price-wrapper">
			<view class="card-item">
				<view class="left">
					<text>
						商品金额
						<br />
						运费
					</text>
				</view>
				<view class="right">
					<text>
						￥{{ price }}
						<br />
						+￥{{ Number(freight).toFixed(2) }}
					</text>
				</view>
			</view>
		</view>

		<view class="bottom-wrapper">
			<text class="total">合计:￥{{ Number(freight).toFixed(2) }}</text>
			<text class="btn" @click="foodOrder">提交订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupon_id: 0, //优惠券id
				dishes_id: 0, //菜品id

				picker_range_array: {
					gender: ['男性', '女性'],
					exercise: ['是', '否']
				},
				gender: '男性', //性别
				demand_key_list: [],
				demand_value_list: [],
				user_check_demand: {},
				tomorrow: '',
				end_day: '',

				name: '', //周期购商品名称
				price: 0, //商品价格
				goods_img: '', //商品图片
				addr_item: {}, //用户选择的地址
				user_height: '', //用户的身高
				user_weight: '', //用户的体重
				user_is_exercise: '否', //用户是否健身
				// check_material_ids: [], //用户选择的备注食材
				// message: '', //用户的留言
				check_start_day: '', //用户的预约时间
				check_start_time: '12:00', //午餐预约时间
				freight: 0 //运费
			};
		},
		onLoad(o) {
			if (o.coupon_id) {
				this.coupon_id = o.coupon_id;
			}
		},
		mounted() {
			let date = new Date();
			this.tomorrow =
				`${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().length == 1 ? '0' + (date.getUTCMonth() + 1) : date.getUTCMonth() + 1}-${
			(date.getDate() + 1).toString().length == 1 ? '0' + (date.getDate() + 1) : date.getDate() + 1
		}`;
			this.check_start_day = this.tomorrow;
			date = new Date(date.getTime() + 30 * 24 * 3600 * 1000);
			this.end_day =
				`${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().length == 1 ? '0' + (date.getUTCMonth() + 1) : date.getUTCMonth() + 1}-${
			(date.getDate() + 1).toString().length == 1 ? '0' + (date.getDate() + 1) : date.getDate() + 1
		}`;
			this.getData();
		},
		methods: {
			getData: function() {
				// 获取优惠券详情
				this.$api
					.getCouponInfo({
						coupon_id: this.coupon_id
					})
					.then(res => {
						this.dishes_id = res.data.dishes_id;
						this.freight = res.data.freight;
						// 获取计划详情
						this.getDishInfo();
					});
				// 获取需求列表
				this.$api
					.orderDemand()
					.then(res => {
						console.log(res);
						this.demand_list = res.data;
						for (let v of res.data) {
							this.demand_key_list.push(v.id);
							this.demand_value_list.push(v.type_name);
						}
						this.user_check_demand = {
							id: this.demand_key_list[0],
							type_name: this.demand_value_list[0]
						};
					})
					.catch(err => {
						if (err.msg) this.$db._ShowToast(err.msg);
					});
				// 获取用户默认地址
				this.$api.getUserDefaultAddr().then(res => {
					// console.log(res);
					this.addr_item = res.data;
				});
			},
			getDishInfo: function() {
				// 获取周计划详情
				this.$api
					.getDishInfo({
						dish_id: this.dishes_id
					})
					.then(res => {
						console.log(res);
						this.name = res.data.name;
						this.goods_img = res.data.cover;
					})
					.catch(err => {
						if (err.msg) this.$db._ShowToast(err.msg);
					});
			},
			addrClic: function() {
				// 选择地址
				uni.$once('chack_addr', res => {
					if (!res.data) {
						return false;
					}
					this.addr_item = res.data;
					this.$db._GoBack();
				});
				this.$db._NavTo('addressList_page');
			},
			genderChange: function(value) {
				this.gender = this.picker_range_array.gender[value.detail.value];
			},
			chekeIsExercise: function(v) {
				// 用户选择是否健身
				this.user_is_exercise = this.picker_range_array.exercise[v.target.value];
			},
			checkDemand: function(value) {
				// 用户选择需求
				this.user_check_demand = {
					id: this.demand_key_list[value.detail.value],
					type_name: this.demand_value_list[value.detail.value]
				};
			},
			checkStartDay: function(v) {
				// 用户选择计划开始时间
				console.log(v);
				this.check_start_day = v.target.value;
			},
			checkStartTime: function(v) {
				// 用户选择午餐时间
				console.log(v);
				this.check_start_time = v.target.value;
			},
			// openFoodNeeds: function() {
			// 	// 接收需求数据
			// 	uni.$once('food_needs_submit', res => {
			// 		if (!res.data) {
			// 			return false
			// 		}
			// 		this.check_material_ids = res.data.check_material_ids;
			// 		console.log(this.check_material_ids);
			// 		this.message = res.data.message;
			// 		this.$db._GoBack();
			// 	})
			// 	// 打开添加需求页面
			// 	this.$db._NavTo('food_needs_page', {
			// 		check_material_ids: JSON.stringify(this.check_material_ids),
			// 		message: this.message
			// 	})
			// },
			foodOrder: function() {
				let day_arr = this.check_start_day.split('-');
				let time_array = this.check_start_time.split(':');
				let date_day = new Date(Number(day_arr[0]), Number(day_arr[1]) - 1, Number(day_arr[2]), Number(time_array[0]),
					Number(time_array[1]), 0);
				console.log(date_day.getTime());
				// 下单
				if (!'id' in this.addr_item || !this.addr_item.id) {
					this.$db._ShowToast('请选择收货地址');
					return false;
				}
				// if (!this.user_height) {
				// 	this.$db._ShowToast('请输入您的身高');
				// 	return false;
				// }
				// if (!this.user_weight) {
				// 	this.$db._ShowToast('请输入您的体重');
				// 	return false;
				// }


				this.$api
					.foodOrder({
						goods_id: this.dishes_id,
						address_id: this.addr_item.id,
						coupon_id: this.coupon_id,
						// sex: this.gender == '男性' ? 1 : 2,
						// height: this.user_height,
						// width: this.user_weight,
						// is_keep: this.user_is_exercise == '是' ? 1 : 2,
						cyclically_id: this.user_check_demand.id,
						p_time: Math.round(date_day.getTime() / 1000)
					})
					.then(res => {
						// 支付
						this.$api
							.wxPay({
								ids: res.data.order_id
							})
							.then(ret => {
								if ('data' in ret && ret.data === 10059) {
									this.$db._NavTo('submited-order-page', {
										order_id: res.data.order_id
									}, this.$db.navToMethod[1]);
								} else {
									location.href = ret.data.url
								}
							});
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fafafa;
		padding-bottom: 90rpx;
	}

	.addr-wrapper {
		position: relative;
		padding: 38rpx 38rpx 60rpx;
		display: flex;
		background: #fafafa;

		.addr-detail {
			width: 100%;
			flex-shrink: 1;

			.name-and-mobile {
				display: flex;
				align-items: center;

				image {
					margin-right: 14rpx;
					width: 25rpx;
					height: 29rpx;
				}

				.name,
				.mobile {
					font-size: 28rpx;
					color: #252525;
				}

				.mobile {
					margin-left: auto;
				}
			}

			.addr-info {
				margin-top: 16rpx;
				margin-left: 39rpx;

				text {
					font-size: 24rpx;
					color: #616161;
				}
			}
		}

		.addr-right {
			flex-shrink: 0;
			margin: auto 0 auto 34rpx;
			width: 12rpx;
			height: 22rpx;
		}

		.addr-bottom {
			position: absolute;
			bottom: 20rpx;
			left: 0;
			width: 100%;
			height: 6rpx;
		}
	}

	.shop-head {
		padding: 18rpx 38rpx;
		display: flex;
		align-items: center;
		background: #ffffff;

		image {
			width: 26rpx;
			height: 23rpx;
		}

		text {
			margin-left: 14rpx;
			font-size: 28rpx;
			color: #494949;
		}
	}

	.shop-detail-wrapper {
		padding: 38rpx 40rpx;
		display: flex;
		background: #fafafa;

		image {
			width: 138rpx;
			height: 138rpx;
			border-radius: 10rpx;
		}

		.name-and-price {
			margin-left: 20rpx;
			display: flex;
			flex-flow: column;

			.name {
				font-size: 32rpx;
				color: rgba(37, 37, 37, 1);
			}

			.price {
				margin-top: auto;
				font-size: 28rpx;
				color: #252525;
			}
		}

		.nums {
			margin-top: auto;
			margin-left: auto;
			font-size: 28rpx;
			color: #252525;
		}
	}

	.card-list {
		margin: 20rpx 0;
		padding: 0 30rpx;
		background: #fff;

		picker+picker {
			.card-item {
				border-top: 1rpx solid #ececec;
			}
		}

		picker+.card-item {
			border-top: 1rpx solid #ececec;
		}
	}

	.card-item {
		padding: 24rpx 0;
		display: flex;
		background: #fff;

		&+.card-item {
			border-top: 1rpx solid #ececec;
		}

		&+picker {
			.card-item {
				border-top: 1rpx solid #ececec;
			}
		}

		text {
			font-size: 24rpx;
			line-height: 28rpx;
			color: rgba(39, 39, 39, 1);
		}

		.left {
			display: flex;
			align-items: center;

			image {
				margin-right: 10rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}

		.right {
			margin-left: auto;
			display: flex;
			align-items: center;

			text {
				margin-left: 20rpx;
				color: #999999;
			}

			image {
				margin-left: 20rpx;
				width: 12rpx;
				height: 22rpx;
			}

			input {
				margin-left: 50rpx;
				width: 282rpx;
				font-size: 22rpx;
				text-align: right;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.start-date-warpper {
		.right {
			text {
				margin-left: 0;
			}

			input {
				margin-left: 20rpx;
				margin-right: 10rpx;
				width: 60rpx;
				text-align: right;
				font-size: 24rpx;
			}
		}
	}

	.shop-price-wrapper {
		view:nth-child(1) {
			text {
				line-height: 41rpx;
			}

			.right {
				text-align: right;
			}
		}
	}

	.bottom-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		display: flex;
		background: #ffffff;
		box-shadow: 0 0rpx 10rpx rgba(0, 0, 0, 0.5);

		.total {
			line-height: 90rpx;
			margin-left: auto;
			margin-right: 40rpx;

			.del-price {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
			}
		}

		.btn {
			display: block;
			height: 90rpx;
			width: 212rpx;
			text-align: center;
			line-height: 90rpx;
			background: #2f2f34;
			color: #ffffff;
		}
	}
</style>
